<template>
  <div>
    <table class="table table-borderless table-sm">
      <colgroup>
        <col width="25%" />
        <col width="75%" />
      </colgroup>
      <tbody>
        <tr>
          <td class="text-muted">批次号：</td>
          <td>{{ batchData.batch_no }}</td>
        </tr>
        <tr>
          <td class="text-muted">项目数量：</td>
          <td>{{ batchData.project_amount }}</td>
        </tr>
        <tr>
          <td class="text-muted">汇总总额(万元)：</td>
          <td>{{ batchData.project_funds }}</td>
        </tr>
        <tr>
          <td class="text-muted">推荐银行：</td>
          <td>{{ batchData.bank_name }}</td>
        </tr>

        <tr>
          <td class="text-muted">项目负责人A角：</td>
          <td>
            <select-staff
              v-model="putData.res_a"
              class="form-control-ml"
              placeholder="请选择A角"
              @select="handleSelectStaffA"
            ></select-staff>
          </td>
        </tr>

        <tr>
          <td class="text-muted">项目负责人B角：</td>
          <td>
            <select-staff
              v-model="putData.res_b"
              class="form-control-ml"
              placeholder="请选择B角"
              @select="handleSelectStaffB"
            ></select-staff>
          </td>
        </tr>
      </tbody>
    </table>

    <div class="text-center mt-5">
      <el-button @click="submit" :loading="submitLoading" type="primary" class="btn-long">
        确认
      </el-button>
      <el-button @click="rejectConfirm" :loading="submitLoading" type="danger" class="btn-long">
        拒绝
      </el-button>
      <el-button @click="beforeClose" class="btn-long">取消</el-button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { dateFormat } from '@vimi/utils-tool'

import SelectStaff from '@/components/select/SelectStaff'

export default {
  components: {
    SelectStaff,
  },
  props: {
    visible: Boolean,
    batchData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      putData: {
        res_a: '',
        res_b: '',
        res_a_name: '',
        res_b_name: '',
      },
      submitLoading: false,
    }
  },
  computed: {
    ...mapGetters(['userId', 'user', 'clientId']),
    batchId() {
      return this.batchData.customer_related_quick_batch_id
    },
  },
  watch: {
    batchData: {
      handler: function () {
        Object.keys(this.putData).forEach(key => {
          this.putData[key] = this.batchData[key] || ''
        })
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('close', false)
    },

    submit() {
      if (!this.putData.res_a) {
        return this.$message.warning('请选择项目负责人A角')
      }
      if (!this.putData.res_b) {
        return this.$message.warning('请选择项目负责人B角')
      }

      this.submitLoading = true
      this.updateData({
        ...this.putData,
        claim_status: 1,
        claim_time: dateFormat(new Date()),
        claim_person: this.userId,
      })
        .then(res => {
          this.$emit('success', res)
          this.$message.success('项目受理成功')
        })
        .catch(() => {
          this.$message.error('项目受理失败')
        })
        .finally(() => {
          this.submitLoading = false
        })
    },

    handleSelectStaffA(staff) {
      this.putData.res_a_name = staff.realName
    },

    handleSelectStaffB(staff) {
      this.putData.res_b_name = staff.realName
    },

    rejectConfirm() {
      this.$utils
        .msgbox({
          message: '确定拒绝？',
          type: 'warning',
          beforeClose: () => {
            this.submitLoading = true
            return this.updateData({
              claim_status: 2,
              confuse_status: 3,
              confuse_person: this.user.realName,
              confuse_time: dateFormat(new Date()),
              claim_time: dateFormat(new Date()),
              claim_person: this.userId,
            })
          },
        })
        .then(res => {
          this.$message.success('拒绝成功！')
          this.$emit('success', res)
        })
        .catch(err => {
          this.$message.error('拒绝失败，请重试！')
          throw new Error(err)
        })
        .finally(() => {
          this.submitLoading = false
        })
    },

    updateData(data) {
      return this.$api.updateData({
        table: 'customer_related_quick_batch',
        id: this.batchId,
        data,
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
